<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行高</title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background-color:skyblue;
				text-align: center;
				/* 垂直对齐*/
				/*vertical-align:middle*/
				
				/*行高和字体大小有关
				 * chrome默认为1.32倍
				 *
				 * 撑起内容高度的不是文字大小，是行高
				 * 
				 *  单行文字的垂直居中：行高和高度一致
				 *  多行文字的垂直居中：
				 * 				1.先设置父元素的行高和高度一致
				 * 				2.重新设置子元素内部的行高
				 * 
				 * 行高有继承性，font/color都有继承性
				 * 
				 * 
				 * */
				line-height:100px;				
				font-size: 16px;
			}	
			.box span{
					display: inline-block;
					vertical-align: middle;
					line-height: 1.32;
				}	
				
				.box2{
					border: px solid black;
					margin-bottom:50px;
					vertical-position: bottom;
					background-color: pink;
					}
				.box2 span{
					vertical-align: text-bottom;
				}
				/*vertical-align 	该元素以某条线的方式对齐同一行的其他元素
				 text-align  		控制子元素/文本内容的水平对齐，对行内块元素也有效果
				 
				 行内块级元素：	既保留行内元素通过自身内容撑开宽高的特点，
				 				也有块级元素的特点，可以设置宽高、margin值(上下)
				 
				 * */
					
	
		</style>
	</head>
	<body>
		
		
		<div class="box">
			<span>
				测试行高<br>
				测试行高<br>	
			</span>
			
			
		</div>
		<div class="box2">
			<img src="./img/1.png" alt=""  width="100px"/><span>图片</span>
		</div>
	</body>
</html>
